<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <form
    [tgRestoreFocus]="getRestoreFocusTarget()"
    (tgOutsideClick)="leaveForm()"
    class="edit-status-form-card"
    #form="ngForm"
    [showFormErrors]="submitted"
    [formGroup]="statusForm"
    (submit)="editStatus()">
    <div class="content">
      <span
        class="color"
        [style.border-color]="textColor"></span>
      <tg-ui-input class="status-input">
        <input
          tgAutoFocus
          [attr.aria-label]="t('kanban.status_name')"
          formControlName="name"
          data-test="create-status-input"
          [maxlength]="statusMaxLength"
          #statusInput
          inputRef
          [placeholder]="t('kanban.write_status')" />
        <ng-container inputError>
          <tg-ui-error error="required">
            {{ t('kanban.status_empty') }}
          </tg-ui-error>
          <tg-ui-error error="pattern">
            {{ t('kanban.status_empty') }}
          </tg-ui-error>
        </ng-container>
      </tg-ui-input>
    </div>
    <div
      *ngIf="statusForm.get('name')!.value?.length! >= statusMaxLength"
      class="max-length">
      {{ t('form_errors.max_length') }}
    </div>

    <div class="actions">
      <button
        tuiButton
        data-test="status-create"
        appearance="primary"
        type="submit">
        <ng-container *ngIf="action === 'creation'">
          {{ t('kanban.create_status') }}
        </ng-container>
        <ng-container *ngIf="action === 'edition'">
          {{ t('commons.save') }}
        </ng-container>
      </button>
      <button
        (click)="cancelEdit()"
        data-test="cancel-edit-status"
        tuiButton
        type="button"
        appearance="tertiary">
        {{ t('commons.cancel') }}
      </button>
    </div>
  </form>
</ng-container>
